import './style.css'
import 'ol/ol.css'
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import { OSM, XYZ } from 'ol/source';
import {defaults} from 'ol/control/defaults'
import ScaleLine from 'ol/control/ScaleLine.js'
import FullScreen from 'ol/control/FullScreen.js'
import ZoomSlider from 'ol/control/ZoomSlider.js'
import MousePosition from 'ol/control/MousePosition.js'

// ol 事宜面向对象的形式设计 api 的 js 库，可以用来制作地图、图层、控件、交互等
/**
 * target: 地图容器
 * view: 地图视图
 * layers: 地图的图层（都有一个底图）
 * source: 图层的源
 */
const map = new Map({
    target: 'map', 
    view: new View({
        center: [114.3165, 30.5953], // 地图中心点
        zoom: 10, // 缩放级别
        projection: 'EPSG:4326', // 投影 默认情况下 ol 使用的不是经纬度坐标系 使用的是墨卡投影体系
    }),
    layers: [new TileLayer({
        source: new XYZ({
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
        })
        // source: new OSM()
    })],
    // 添加默认控件
    // controls: defaults({
    //     zoom: true,
    //     rotate: true, 
    //     attribution: false,
    //     label: '高德地图'
    // })
    // 添加控件
    controls: [
        new ScaleLine(), // 添加比例尺
        new FullScreen(), // 添加全屏按钮
        new ZoomSlider(), // 添加缩放滑块
        new MousePosition() // 添加鼠标位置
    ]
})


